<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/web/js/global/global_header.js"></script>
    <title>华锐Pms</title>
</head>
<style>
    .Pms_primary_plain_btn_active {
        color: #053dc8 !important;
        border: 1px solid #053dc8 !important;
        z-index: 1;
    }

    .el-button--small {
        /* 主要朴素按钮字体大小 */
        font-size: 14px;
        padding: 8px 15px;
    }

    .el-button.is-plain:focus,
    .el-button.is-plain:hover {
        background: #FFF;
        border-color: #053dc8;
        color: #053dc8;
    }


    /* 表格框选 */
    .grad-table {
        position: relative;
        user-select: none;
        display: block;
        /* width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar; */
    }

    .grad-table .mask {
        position: absolute;
        background: rgb(33, 83, 206);
        opacity: 0.4;
        z-index: 10000000000000;
    }

    .calendar-date td {
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        width: 50px;
    }

    .grad-table table.gridtable {
        width: 100%;
        height: 100%;
        border: 1px solid #dfe2e9;
    }

    .grad-table table.gridtable td,
    .grad-table table.gridtable th {
        text-align: center;
        border: 1px solid #dfe2e9;
    }

    .grad-table table.gridtable th {

        background: white;
        border: 1px solid #dfe2e9;
    }

    .grad-table table.gridtable .week-first-td {

        background: white;
        border: 1px solid #dfe2e9;
    }

    .grad-table table.gridtable .week-data-td {
        line-height: normal;
        vertical-align: top;
        font-size: 10px;
        position: relative;
        cursor: pointer;
        border: 1px solid #dfe2e9;
    }

    .grad-table table.gridtable .week-data-td .td-data-p {
        position: absolute;
        width: 200%;
        display: block;
        left: 0;
        z-index: 10;
        text-align: center;
    }

    .grad-table table.gridtable .week-data-td .td-data-content {
        bottom: 0;
    }

    .grad-table table.gridtable .white-font {
        color: rgba(255, 255, 255, 0.8);
    }

    .calendar-tool td {
        height: 32px;
        line-height: 32px;
    }

    /* end */

    /* table滚动条 */
    .room_table_wrap {
        overflow: auto;

    }

    .room_table_wrap::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .room_table_wrap::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        -webkit-box-shadow: inset1px1px0rgba(0, 0, 0, 0);
        transition: all 0.3s;
    }

    .room_table_wrap:hover::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        -webkit-box-shadow: inset1px1px0rgba(0, 0, 0, .1);
        transition: all 0.3s;
    }

    .room_table_wrap::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: inset1px1px0rgba(0, 0, 0, 0);
        transition: all 0.3s;
    }

    .room_table_wrap::-webkit-scrollbar-track {
        border-radius: 10px;
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
        background-color: rgba(0, 0, 0, 0);
        transition: all 0.3s;
    }

    .room_table_wrap::-webkit-scrollbar-track:hover {
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
        background-color: rgba(0, 0, 0, 0);
        transition: all 0.3s;
    }
</style>

<body class="bgc-f2">
    <div id="app" class="main-container h-full" v-cloak>
        <!-- 顶部导航栏 -->
        <div class="grad-table" id="selectContainer" @mousedown="handleMouseDown" style="height:100%;">
            <div class="pl-17 pr-16 pt-17 pb-16">
                <el-button-group class=" m">
                    <el-button size="small" plain class="Pms_primary_plain_btn_active">日历</el-button>
                    <el-button size="small" plain>单日</el-button>
                    <el-button size="small" plain>渠道</el-button>
                </el-button-group>
            </div>
            <!-- <div style="margin-bottom: 10px; text-align: right;">
                <el-button @click="reset" class="reset-btn">重置</el-button>
                <el-button @click="reset">取消框选</el-button>
                <el-button type="primary" @click="changeVal">确认更改</el-button>
            </div> -->
            <div class="pl-17 pr-16 pb-6">
                <el-table :data="tableData" border style="width: 100%" height="800">
                    <!-- 左边日期、筛选、收起列 -->
                    <el-table-column fixed width="150">
                        <template slot="header" slot-scope="scope">
                            <div class="cup">
                                <div class="ub ub-ac ub-pc tx-bl" @click="$refs.dateTool.focus()">
                                    <i class="el-icon-arrow-left"></i>
                                    <div class="ml-5 mr-5">{{dateVal}}</div>
                                    <i class="el-icon-arrow-right"></i>
                                </div>
                                <div style="height: 0;overflow: hidden;position: absolute;top:00px;left:30px">
                                    <el-date-picker v-model="dateVal" type="date" placeholder="选择日期"
                                        value-format="yyyy-MM-dd" ref="dateTool">
                                    </el-date-picker>
                                    </el-date-picker>
                                </div>
                            </div>
                        </template>

                        <el-table-column prop="roomTypeName">
                            <template slot="header" slot-scope="scope">
                                <div>筛选<i class="el-icon-s-operation ml-5"></i></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="roomName">
                            <template slot="header" slot-scope="scope">
                                <div>收起<i class="el-icon-arrow-up ml-5"></i></div>
                            </template>
                        </el-table-column>

                    </el-table-column>
                    <!-- 每日日期和剩余间数 -->
                    <el-table-column v-for="(item,index) in timeThArr" :key="index">
                        <template slot="header" slot-scope="scope">
                            <div style="width: 98px;">
                                <span v-if="WebUtil.judgeTime(item)" class="tx-bl">
                                    今天
                                    <span class="ml-3">{{WebUtil.getWeek(item)}}</span>
                                </span>
                                <span v-else>
                                    <span v-if="WebUtil.getWeek(item) == '五' || WebUtil.getWeek(item) == '六'"
                                        class="tx-re">
                                        {{item.substring(5,item.length)}}
                                        <span class="ml-3">{{WebUtil.getWeek(item)}}</span>
                                    </span>
                                    <span v-else>
                                        {{item.substring(5,item.length)}}
                                        <span class="ml-3 tx-99">{{WebUtil.getWeek(item)}}</span>
                                    </span>
                                </span>
                            </div>
                        </template>

                        <el-table-column>
                            <template slot="header" slot-scope="scope">
                                <span class="tx-12 tx-99">
                                    剩23间
                                </span>
                            </template>
                        </el-table-column>

                    </el-table-column>
                </el-table>


                <table class="gridtable" align="center" border="1" bordercolor="#e1e1e1" cellspacing="0" cellpadding="0"
                    style="border-collapse:collapse;display:none;">
                    <!-- 日期行 -->
                    <thead>
                        <tr class="calendar-date">
                            <td class="calendar-date-select" colspan="2" style="position: relative;">
                                <div class="cup">
                                    <div class="ub ub-ac ub-pc tx-bl" @click="$refs.dateTool.focus()">
                                        <i class="el-icon-arrow-left"></i>
                                        <div class="ml-5 mr-5">{{dateVal}}</div>
                                        <i class="el-icon-arrow-right"></i>
                                    </div>
                                    <div style="height: 0;overflow: hidden;position: absolute;top:00px;left:30px">
                                        <el-date-picker v-model="dateVal" type="date" placeholder="选择日期"
                                            value-format="yyyy-MM-dd" ref="dateTool">
                                        </el-date-picker>
                                        </el-date-picker>
                                    </div>
                                </div>
                            </td>
                            <td v-for="(item,index) in timeThArr" :key="index">
                                <div style="width: 98px;">
                                    <span v-if="WebUtil.judgeTime(item)" class="tx-bl">
                                        今天
                                        <span class="ml-3">{{WebUtil.getWeek(item)}}</span>
                                    </span>
                                    <span v-else>
                                        <span v-if="WebUtil.getWeek(item) == '五' || WebUtil.getWeek(item) == '六'"
                                            class="tx-re">
                                            {{item.substring(5,item.length)}}
                                            <span class="ml-3">{{WebUtil.getWeek(item)}}</span>
                                        </span>
                                        <span v-else>
                                            {{item.substring(5,item.length)}}
                                            <span class="ml-3 tx-99">{{WebUtil.getWeek(item)}}</span>
                                        </span>
                                    </span>
                                </div>
                            </td>
                        </tr>
                        <!-- 筛选行 -->
                        <tr class="calendar-date calendar-tool">
                            <td>筛选<i class="el-icon-s-operation ml-5"></i></td>
                            <td>收起<i class="el-icon-arrow-up ml-5"></i></td>
                            <td v-for="(item,index) in timeThArr" :key="index" class="tx-12 tx-99">
                                剩23间
                            </td>
                        </tr>
                    </thead>
                    <!--数据行 -->
                    <tbody>
                        <tr v-for="(item,index) in tableData" :key="index" class="calendar-date">
                            <td class="week-first-td" style="vertical-align: middle;" :rowspan="item.rowSpan"
                                v-if="item.rowSpan>0">
                                <div style="width:98px;">{{item.roomTypeName}}</div>
                            </td>
                            <td class="week-first-td">
                                <div style="width:90px;">{{item.roomName}}</div>
                            </td>
                            <td v-for="(temp,key) in item.priceList" :key="key" class="week-data-td"
                                @click="handleClickTimeData(temp,index)"
                                :style="`background:${temp.checked?'#3af':''}`">
                                <div class="tx-l pl-5 pr-3 pb-3 pt-3 tx-99">
                                    <p>{{temp.roomTypeName}}</p>
                                    <p>{{temp.roomName}}</p>
                                    <p class="ub ub-ac"><span style="margin-left: -3px;" v-if="temp.roomPrice">￥</span>
                                        <span style="margin-left: -3px;">{{temp.roomPrice}}</span>
                                    </p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="mask" v-show="is_show_mask"
                :style="'width:'+mask_width()+'left:'+mask_left()+'height:'+mask_height()+'top:'+mask_top()"></div>
            <el-dialog title="输入数字" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                <el-input type="text" v-model="dialogVal"></el-input>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirm">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
    <script type="text/babel">
        new Vue({
            el: '#app',
            data: {
                dateVal: WebUtil.initTimeStr(new Date().getTime(), "day"),//默认日期
                weekArr: [1, 2, 3, 4, 5, 6, 0],
                timeThArr: [],
                timeTdArr: [],
                dialogVisible: false,
                dialogVal: 100,
                tableData: [],
                roomEnum: [
                    {
                        roomTypeName: "雅致双床房",
                        roomTypeId: 1,
                        roomList: [
                            { roomId: 1, roomName: "248" },
                            { roomId: 2, roomName: "249" },
                            { roomId: 3, roomName: "250" },
                            { roomId: 4, roomName: "251" },
                            { roomId: 5, roomName: "252" },
                            { roomId: 6, roomName: "253" },
                            { roomId: 7, roomName: "254" },
                        ]
                    },
                    {
                        roomTypeName: "普通大床房",
                        roomTypeId: 2,
                        roomList: [
                            { roomId: 10, roomName: "238" },
                            { roomId: 11, roomName: "239" },
                            { roomId: 12, roomName: "230" },
                            { roomId: 13, roomName: "231" },
                            { roomId: 14, roomName: "232" },
                            { roomId: 15, roomName: "233" },
                            { roomId: 16, roomName: "234" },
                        ]
                    },
                    {
                        roomTypeName: "普通大床房",
                        roomTypeId: 3,
                        roomList: [
                            { roomId: 10, roomName: "238" },
                            { roomId: 11, roomName: "239" },
                            { roomId: 12, roomName: "230" },
                            { roomId: 13, roomName: "231" },
                            { roomId: 14, roomName: "232" },
                            { roomId: 15, roomName: "233" },
                            { roomId: 16, roomName: "234" },
                        ]
                    },
                ],
                orderList: [
                    {
                        otaType: "美团酒店",
                        guestNmae: "张三",
                        phone: "13800138000",
                        night: "1",
                        night: "1",
                        priceTotal: "168.00",
                        collection: "10.00",    //已收款
                        orderNum: "98665008922331795456",
                        type: '已入住',
                        remarks: "备注",
                    }
                ],
                roomPriceList: [
                    {
                        date: "2022-06-17",
                        surplus: "22间",
                        roomTypeId: "1",
                        roomPrice: "100.25",
                        roomId: "1",
                        roomName: "247",
                    },
                    {
                        date: "2022-06-18",
                        surplus: "22间",
                        roomTypeId: "1",
                        roomPrice: "100.25",
                        roomId: "1",
                        roomName: "247",
                    },
                    {
                        date: "2022-06-19",
                        surplus: "22间",
                        roomTypeId: "1",
                        roomPrice: "100.25",
                        roomId: "1",
                        roomName: "247",
                    },
                    {
                        date: "2022-06-21",
                        surplus: "22间",
                        roomTypeId: "1",
                        roomPrice: "100.25",
                        roomId: "1",
                        roomName: "247",
                    },
                ],

                loading: false,
                start_x: 0,
                start_y: 0,
                end_x: 0,
                end_y: 0,
                box_screen_left: 0,
                box_screen_top: 0,
                is_show_mask: false
            },
            created() {

            },
            methods: {
                setTableConfig() {
                    this.timeThArr = WebUtil.getMonthList(new Date());
                    // 初始化数据列表默认为空；
                    this.tableData = [];
                    //循环插入每行数据
                    for (let i = 0; i < this.roomEnum.length; i++) {
                        const element = this.roomEnum[i];
                        //如果没有房价数据，则只插入房价
                        if (element.roomList.length == 0) {
                            this.tableData.push({
                                roomTypeName: element.roomTypeName,
                                roomTypeId: element.roomTypeId,
                                rowSpan: 1,
                            })
                        }
                        // 循环房间列表插入房间数据和房价数据
                        for (let j = 0; j < element.roomList.length; j++) {
                            const room = element.roomList[j];
                            //当前行对象
                            let dataObj = {}
                            dataObj.roomTypeName = element.roomTypeName;
                            dataObj.roomTypeId = element.roomTypeId;
                            dataObj.roomName = room.roomName;
                            dataObj.roomId = room.roomId;
                            // 判断合并房间类型数据行
                            if ((!this.roomEnum[i - 1] || element.roomTypeId != this.roomEnum[i - 1].roomTypeId) && j == 0) {
                                dataObj.rowSpan = element.roomList.length
                            } else {
                                dataObj.rowSpan = 0
                            }
                            // 当前房间的每日房价
                            let priceList = this.roomPriceList.filter(item => item.roomId == room.roomId);
                            // 当前房间的每日房价列表默认为空
                            dataObj.priceList = []
                            // 循环前端生成的每日日期，将日期相同的房价数据插入到当前行
                            for (let k = 0; k < this.timeThArr.length; k++) {
                                const time = this.timeThArr[k];
                                //判断相同日期的房价数据
                                let price = priceList.filter(item => item.date == time);
                                //如果存在当前循环的日期，则将房态数据插入到当前行，如果当天没有房价数据，则默认为空
                                if (price.length) {
                                    price[0].roomTypeName = dataObj.roomTypeName;
                                    dataObj.priceList.push(price[0])
                                } else {
                                    dataObj.priceList.push({})
                                }
                            }

                            this.tableData.push(dataObj)
                        }
                    }
                    console.log(this.tableData);
                },
                handleClickTimeData(obj, index) {
                    let tableList = _.clone(this.tableData);
                    _.map(tableList[index], (item) => {
                        if (item.key == obj.key) {
                            item.checked = !item.checked;
                        }
                    });
                    this.tableData = tableList;
                },
                reset() {
                    let tableList = _.clone(this.tableData);
                    _.map(tableList, (item) => {
                        _.map(item, (temp) => {
                            temp.checked = false;
                        });
                    });
                    this.tableData = tableList;
                },
                changeVal() {
                    this.dialogVisible = true;
                },
                confirm() {
                    let tableList = _.clone(this.tableData);
                    _.map(tableList, (item) => {
                        _.map(item, (temp) => {
                            if (temp.checked) {
                                temp.val = this.dialogVal;
                            }
                        });
                    });
                    this.tableData = tableList;
                    this.dialogVisible = false;
                    this.reset();
                },
                handleClose() {
                    this.dialogVisible = false;
                },

                // 框选操作
                mask_width() {
                    return `${Math.abs(this.end_x - this.start_x)}px;`;
                },

                mask_height() {
                    return `${Math.abs(this.end_y - this.start_y)}px;`;
                },

                mask_left() {
                    return `${Math.min(this.start_x, this.end_x) - this.box_screen_left
                        }px;`;
                },

                mask_top() {
                    return `${Math.min(this.start_y, this.end_y) - this.box_screen_top
                        }px;`;
                },

                handleMouseDown(e) {
                    this.is_show_mask = true;
                    this.start_x = e.clientX;
                    this.start_y = e.clientY;
                    this.end_x = e.clientX;
                    this.end_y = e.clientY;
                    document.body.addEventListener("mousemove", this.handleMouseMove);
                    document.body.addEventListener("mouseup", this.handleMouseUp);
                },
                handleMouseMove(e) {
                    this.end_x = e.clientX;
                    this.end_y = e.clientY;
                },
                handleMouseUp() {
                    document.body.removeEventListener("mousemove", this.handleMouseMove);
                    document.body.removeEventListener("mouseup", this.handleMouseUp);
                    this.is_show_mask = false;
                    this.handleDomSelect();
                    this.resetXY();
                },
                resetXY() {
                    this.start_x = 0;
                    this.start_y = 0;
                    this.end_x = 0;
                    this.end_y = 0;
                },
                handleDomSelect() {
                    const dom_mask = window.document.querySelector(".mask");
                    const rect_select = dom_mask.getClientRects()[0];
                    console.log("rect_select", rect_select);

                    let selectKeys = [];
                    document.querySelectorAll(".week-data-td").forEach((node, index) => {
                        const rects = node.getClientRects()[0];
                        if (this.collide(rects, rect_select) === true) {
                            selectKeys.push(index);
                        }
                    });
                    if (selectKeys.length < 2) return;
                    let tableList = _.clone(this.tableData);
                    tableList = _.map(tableList, (item, key) => {
                        return _.map(item, (temp) => {
                            if (selectKeys.indexOf(temp.key) > -1) {
                                temp.checked = true;
                            }
                            return temp;
                        });
                    });
                    this.tableData = tableList;
                },

                collide(rect1, rect2) {
                    const maxX = Math.max(rect1.x + rect1.width, rect2.x + rect2.width);
                    const maxY = Math.max(rect1.y + rect1.height, rect2.y + rect2.height);
                    const minX = Math.min(rect1.x, rect2.x);
                    const minY = Math.min(rect1.y, rect2.y);
                    if (
                        maxX - minX <= rect1.width + rect2.width &&
                        maxY - minY <= rect1.height + rect2.height
                    ) {
                        return true;
                    } else {
                        return false;
                    }
                }

                // initMouse() {
                //   setTimeout(() => {
                //     const dom_box = document.querySelector("#selectContainer");
                //     if (dom_box) {
                //       this.box_screen_left = dom_box.getBoundingClientRect().left;
                //       this.box_screen_top = dom_box.getBoundingClientRect().top;
                //     }
                //   }, 1000);
                // }
            },
            mounted() {
                this.setTableConfig();
            }
        })
    </script>

</body>

</html>